<template>
  <div id="page_controller">
    <div id="controller">
      <div id="controller_Tit">
        <span class="tit"><i class="el-icon-edit-outline"/>配置controller
          <el-popover
            placement="top-start"
            width="200"
            trigger="hover"
          >
            <vue-editor
              v-model="helpArrays.CONFIG_CONTROLLER"
              :disabled="true"
              :editor-toolbar="customToolbar"
            />
            <i slot="reference" class="el-icon-question" style="color:#409eff;margin-left:5px;font-size:20px;"/>
          </el-popover>
        </span>
      </div>
      <el-form
        ref="form"
        :model="form"
        label-width="180px"
      >
        <el-form-item
          ref="controllerPackage"
          label="包名称"
        >
          <el-input v-model="list.controllerPackage"/>
          <span
            v-show="tit.controllerPackage"
            class="errortitle"
          >包名称不能为空</span>
        </el-form-item>
        <el-form-item label="文件前缀">
          <el-input v-model="list.controllerPrefix"/>
        </el-form-item>
        <el-form-item label="文件后缀">
          <el-input v-model="list.controllerSuffix"/>
        </el-form-item>
        <el-form-item
          ref="controllerToAddName"
          label="跳转add控制器名"
        >
          <el-input v-model="list.controllerToAddName"/>
          <span
            v-show="tit.controllerToAddName"
            class="errortitle"
          >跳转add控制器名不能为空</span>
        </el-form-item>
        <el-form-item
          ref="controllerToUpdateName"
          label="跳转update控制器名"
        >
          <el-input v-model="list.controllerToUpdateName"/>
          <span
            v-show="tit.controllerToUpdateName"
            class="errortitle"
          >跳转update控制器名不能为空</span>
        </el-form-item>
        <el-form-item
          ref="controllerAddPostName"
          label="add提交控制器名称"
        >
          <el-input v-model="list.controllerAddPostName"/>
          <span
            v-show="tit.controllerAddPostName"
            class="errortitle"
          >add提交控制器名称不能为空</span>
        </el-form-item>
        <el-form-item
          ref="controllerUpdatePostName"
          label="update提交控制器名称"
        >
          <el-input v-model="list.controllerUpdatePostName"/>
          <span
            v-show="tit.controllerUpdatePostName"
            class="errortitle"
          >update提交控制器名称不能为空</span>
        </el-form-item>
        <el-form-item
          ref="controllerToListName"
          label="跳转list控制器名称"
        >
          <el-input v-model="list.controllerToListName"/>
          <span
            v-show="tit.controllerToListName"
            class="errortitle"
          >跳转list控制器名称不能为空</span>
        </el-form-item>
        <el-form-item
          ref="controllerDeleteName"
          label="删除控制器名称"
        >
          <el-input v-model="list.controllerDeleteName"/>
          <span
            v-show="tit.controllerDeleteName"
            class="errortitle"
          >删除控制器名称不能为空</span>
        </el-form-item>
      </el-form>
      <div class="btn">
        <el-button
          class="next"
          @click="onSubmit"
        >下一步</el-button>
        <el-button
          class="back"
          @click="onBack"
        >取消</el-button>
      </div>
    </div>
  </div>
</template>
<style>
#page_controller #controller #controller_Tit .tit i {
  margin-right: 10px;
}
#page_controller #controller {
  margin-left: 15px;
  margin-top: 15px;
  width: 100%;
  border: 1px solid #623f18;
}
#page_controller #controller #controller_Tit {
  width: 100%;
  height: 40px;
  border-bottom: 1px solid #623f18;
}
#page_controller #controller #controller_Tit .tit {
  margin-left: 20px;
  font-size: 20px;
  color: #623f18;
  line-height: 40px;
  float:left;
}
#page_controller #controller .btn {
  text-align: center;
  border-top: 1px solid #e5e5e5;
  padding-top: 10px;
  padding-bottom: 10px;
  background: #f5f5f5;
}
#page_controller #controller .btn .el-button {
  margin-right: 30px;
}
#page_controller .el-form {
  margin: 90px 150px;
  margin-bottom: 20px;
}
#page_controller .el-input {
  width: 350px;
}
#page_controller .el-input__suffix {
  top: 1px;
}
#page_controller .el-form-item__content {
  width: 100%;
}
#page_controller .errortitle {
  color: red;
}
#page_controller .next {
  background: #623f18;
  color: #fff;
}
#page_controller .back {
  border-color: #623f18;
  color: #623f18;
}
</style>
<script>
import { gconfigControllerSave, gconfigController, docwindow } from '@/api/page'
import { VueEditor } from 'vue2-editor'
export default {
  components: {
    VueEditor
  },
  data() {
    return {
      arr: [],
      customToolbar: [],
      helpArrays: [],
      tit: {
        controllerPackage: false,
        controllerToAddName: false,
        controllerToUpdateName: false,
        controllerAddPostName: false,
        controllerUpdatePostName: false,
        controllerToListName: false,
        controllerDeleteName: false
      },
      list: [],
      save: {
        id: '',
        pid: '',
        controllerPackage: '',
        controllerPrefix: '',
        controllerSuffix: '',
        controllerToAddName: '',
        controllerToUpdateName: '',
        controllerAddPostName: '',
        controllerUpdatePostName: '',
        controllerToListName: '',
        controllerDeleteName: ''
      },
      data: {
        pid: ''
      },
      form: {}
    }
  },
  mounted() {
    this.data.pid = localStorage.getItem('pid')
    localStorage.setItem('pid', '')
    gconfigController(this.data)
      .then(response => {
        if (response.data.code == 'SUCCESS') {
          this.list = response.data.data
        } else {
          alert(response.data.message)
        }
      })
      .catch(error => {
        alert(error.response.data.message)
        this.$router.push('/admin')
      })

    this.arr = ['CONFIG_CONTROLLER']

    docwindow(this.arr)
      .then(response => {
        if (response.data.code == 'SUCCESS') {
          this.helpArrays = response.data.data
        } else {
          alert(response.data.message)
        }
      })
      .catch(error => {
        alert(error.response.data.message)
      })
  },
  methods: {
    onSubmit() {
      this.save.id = ''
      this.save.pid = this.data.pid
      this.save.controllerPackage = this.list.controllerPackage || ''
      this.save.controllerPrefix = this.list.controllerPrefix || ''
      this.save.controllerSuffix = this.list.controllerSuffix || ''
      this.save.controllerToAddName = this.list.controllerToAddName || ''
      this.save.controllerToUpdateName = this.list.controllerToUpdateName || ''
      this.save.controllerAddPostName = this.list.controllerAddPostName || ''
      this.save.controllerUpdatePostName =
        this.list.controllerUpdatePostName || ''
      this.save.controllerToListName = this.list.controllerToListName || ''
      this.save.controllerDeleteName = this.list.controllerDeleteName || ''

      if (this.save.controllerPackage == '') {
        this.$refs.controllerPackage.$el.childNodes[0].style.color = 'red'
        this.$refs.controllerPackage.$el.childNodes[1].childNodes[0].childNodes[1].style.borderColor =
          'red'
        this.tit.controllerPackage = true
      } else {
        this.$refs.controllerPackage.$el.childNodes[0].style.color = '#606266'
        this.$refs.controllerPackage.$el.childNodes[1].childNodes[0].childNodes[1].style.borderColor =
          '#c0c4cc'
        this.tit.controllerPackage = false
      }

      if (this.save.controllerToAddName == '') {
        this.$refs.controllerToAddName.$el.childNodes[0].style.color = 'red'
        this.$refs.controllerToAddName.$el.childNodes[1].childNodes[0].childNodes[1].style.borderColor =
          'red'
        this.tit.controllerToAddName = true
      } else {
        this.$refs.controllerToAddName.$el.childNodes[0].style.color =
          '#606266'
        this.$refs.controllerToAddName.$el.childNodes[1].childNodes[0].childNodes[1].style.borderColor =
          '#c0c4cc'
        this.tit.controllerToAddName = false
      }

      if (this.save.controllerToUpdateName == '') {
        this.$refs.controllerToUpdateName.$el.childNodes[0].style.color = 'red'
        this.$refs.controllerToUpdateName.$el.childNodes[1].childNodes[0].childNodes[1].style.borderColor =
          'red'
        this.tit.controllerToUpdateName = true
      } else {
        this.$refs.controllerToUpdateName.$el.childNodes[0].style.color =
          '#606266'
        this.$refs.controllerToUpdateName.$el.childNodes[1].childNodes[0].childNodes[1].style.borderColor =
          '#c0c4cc'
        this.tit.controllerToUpdateName = false
      }

      if (this.save.controllerAddPostName == '') {
        this.$refs.controllerAddPostName.$el.childNodes[0].style.color = 'red'
        this.$refs.controllerAddPostName.$el.childNodes[1].childNodes[0].childNodes[1].style.borderColor =
          'red'
        this.tit.controllerAddPostName = true
      } else {
        this.$refs.controllerAddPostName.$el.childNodes[0].style.color =
          '#606266'
        this.$refs.controllerAddPostName.$el.childNodes[1].childNodes[0].childNodes[1].style.borderColor =
          '#c0c4cc'
        this.tit.controllerAddPostName = false
      }

      if (this.save.controllerUpdatePostName == '') {
        this.$refs.controllerUpdatePostName.$el.childNodes[0].style.color =
          'red'
        this.$refs.controllerUpdatePostName.$el.childNodes[1].childNodes[0].childNodes[1].style.borderColor =
          'red'
        this.tit.controllerUpdatePostName = true
      } else {
        this.$refs.controllerUpdatePostName.$el.childNodes[0].style.color =
          '#606266'
        this.$refs.controllerUpdatePostName.$el.childNodes[1].childNodes[0].childNodes[1].style.borderColor =
          '#c0c4cc'
        this.tit.controllerUpdatePostName = false
      }

      if (this.save.controllerToListName == '') {
        this.$refs.controllerToListName.$el.childNodes[0].style.color = 'red'
        this.$refs.controllerToListName.$el.childNodes[1].childNodes[0].childNodes[1].style.borderColor =
          'red'
        this.tit.controllerToListName = true
      } else {
        this.$refs.controllerToListName.$el.childNodes[0].style.color =
          '#606266'
        this.$refs.controllerToListName.$el.childNodes[1].childNodes[0].childNodes[1].style.borderColor =
          '#c0c4cc'
        this.tit.controllerToListName = false
      }

      if (this.save.controllerDeleteName == '') {
        this.$refs.controllerDeleteName.$el.childNodes[0].style.color = 'red'
        this.$refs.controllerDeleteName.$el.childNodes[1].childNodes[0].childNodes[1].style.borderColor =
          'red'
        this.tit.controllerDeleteName = true
      } else {
        this.$refs.controllerDeleteName.$el.childNodes[0].style.color =
          '#606266'
        this.$refs.controllerDeleteName.$el.childNodes[1].childNodes[0].childNodes[1].style.borderColor =
          '#c0c4cc'
        this.tit.controllerDeleteName = false
      }

      if (
        !this.tit.controllerPackage &&
        !this.tit.controllerToAddName &&
        !this.tit.controllerToUpdateName &&
        !this.tit.controllerAddPostName &&
        !this.tit.controllerUpdatePostName &&
        !this.tit.controllerToListName &&
        !this.tit.controllerDeleteName
      ) {
        gconfigControllerSave(this.save)
          .then(response => {
            if (response.data.code == 'SUCCESS') {
              this.openFullScreen()
              setTimeout(() => {
                this.loading.close()
                this.$router.push('/admin/pageView')
                localStorage.setItem('pid', this.data.pid)
              }, 1000)
            } else {
              alert(response.data.message)
            }
          })
          .catch(error => {
            alert(error.response.data.message)
          })
      }
    },
    onBack() {
      this.$router.go(-1)
      localStorage.setItem('pid', this.data.pid)
    },
    openFullScreen() {
      this.loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
    }
  }
}
</script>
